<template>
	<view class="cu-modal bottom-modal" :class="couponModal?'show':''" @tap="hideModal" catchtouchmove="touchMove">
		<view class="cu-dialog" style="background-color:#f5f5f5 ;height: 65%;" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<view class="content">优惠券</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<z-paging ref="paging" v-model="couponList" @query="getPage" :fixed="false">
				<scroll-view scroll-y scroll-with-animation style="max-height: 66vh;">
					<view v-for="(item,index) in couponList">
						<view v-if="showCoupon">
							<coupon-info :couponInfo="item" @changeCoupon="changeCoupon($event,index)">
							</coupon-info>
						</view>
					</view>
					<view class="cu-tabbar-height"></view>
				</scroll-view>
			</z-paging>
		</view>

	</view>
</template>

<script>
	import couponInfo from '@/components/coupon-info/index.vue'
	import {
		getPage as getCouponPage
	} from '@/api/couponinfo.js'
	export default {
		components: {
			couponInfo
		},
		props: {
			spuId: {
				type: String,
				default: () => ''
			},
			couponModal: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showCoupon: true,
				theme: getApp().globalData.theme,
				couponList: []
			}
		},
		methods: {
			touchMove() {
				return;
			},
			hideModal() {
				this.$emit('changeCouponModal', false)
			},
			changeCoupon(data, index) {
				this.showCoupon = false;
				this.couponList[index].couponUserId = data;
				this.showCoupon = true;
			},
			getPage(pageNo, pageSize) {
				getCouponPage({
					current: pageNo,
					size: pageSize,
					spuId: this.spuId,
					descs: "create_time",
				}).then(response => {
					this.couponList = response.data.records
				})
			},
		}
	}
</script>
